<template>
  <div class="todo-footer">
    <input type="checkbox" v-model="isAllCheck">
    <span>已完成{{completeSize}}/全部{{todos.length}}</span>
    <button v-show="completeSize"
      @click="deleteCompleteTodo"
    >清除已完成的任务</button>
  </div>
</template>

<script>
export default {
  props: {
    todos: Array,
    deleteCompleteTodo: Function,
    selectAllTodos: Function
  },
  computed: {
    completeSize() {
      return this.todos.reduce((preTotal, todo) => preTotal + (todo.complete?1:0), 0)
    },
    isAllCheck: {
      get() {
        return this.completeSize===this.todos.length && this.completeSize>0
      },
      set(v) { //value是当前checkbox最新的值
        this.selectAllTodos(v)
      }
    }
  }
}
</script>

<style lang="scss">
  
</style>
